<template>
    <BreadCrumb ref="breadcrumb" :item='item'></BreadCrumb>
    <!-- wrapper -->
    <div class="module-common-wrapped">
        <div class="module-common-content">
            <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                <el-tab-pane label="助学金列表" name="first">
                    <div class="pane-content">
                        <div class="pane-top">
                            <div class="module-common-header">
                                <div class="button-wrapped">
                                    <el-button type="primary" @click="addNewB">新增申请</el-button>
                                </div>
                            </div>
                            <!-- 表格部分 -->
                            <div class="module-common-table">
                                <el-table :data="tableData" border style="width: 100%">
                                    <el-table-column type="index" width="50"></el-table-column>
                                    <el-table-column prop="id" label="编号" width="200" />
                                    <el-table-column prop="student_id" label="学号" width="160" />
                                    <el-table-column prop="student_name" label="姓名" width="100" />
                                    <el-table-column prop="department" label="部门" width="100" />
                                    <el-table-column prop="major" label="专业" width="100" />
                                    <el-table-column prop="grade" label="年级" width="150" />
                                    <el-table-column prop="student_type" label="学生类型" width="100" />
                                    <el-table-column prop="bursary_level" label="申请类型" width="100" />
                                    <el-table-column prop="family_income" label="家庭收入" width="150" />
                                    <el-table-column prop="status" label="审核状态" width="200">
                                        <template #default="{ row }">
                                            <el-tag class="ml-2" type="primary" v-if="row.status == 0">未审核</el-tag>
                                            <el-tag class="ml-2" type="success"
                                                v-else-if="row.status == 1">小组审核通过</el-tag>
                                            <el-tag class="ml-2" type="danger"
                                                v-else-if="row.status == -1">小组审核未通过</el-tag>
                                            <el-tag class="ml-2" type="success"
                                                v-else-if="row.status == 2">辅导员审核通过</el-tag>
                                            <el-tag class="ml-2" type="danger"
                                                v-else-if="row.status == -2">辅导员审核未通过</el-tag>
                                            <el-tag class="ml-2" type="success"
                                                v-else-if="row.status == 3">院领导审核通过</el-tag>
                                            <el-tag class="ml-2" type="danger"
                                                v-else-if="row.status == -3">院领导审核未通过</el-tag>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="student_name" label="发起人" width="100" />
                                    <el-table-column prop="create_time" label="发起时间" width="200">
                                        <template #default="{ row }">
                                            <div>{{ row.create_time?.slice(0, 10) }}</div>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="update_time" label="最后修改时间" width="200">
                                        <template #default="{ row }">
                                            <div>{{ row.update_time?.slice(0, 10) }}</div>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="操作" width="180" fixed="right">
                                        <template #default="{ row }">
                                            <div>
                                                <el-button type="success" @click="editBursary(row)">编辑</el-button>
                                                <el-button type="danger" @click="deleteBursary(row)">删除</el-button>
                                            </div>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                        </div>
                        <div class="table-footer">
                            <el-pagination :page-size="paginationData.bursaryPageSize"
                                :current-page="paginationData.bursarytCurrentPage" :pager-count="7"
                                :total="paginationData.bursaryTotal" :page-count="paginationData.bursarytPageCount"
                                @current-change="BursaryCurrentChange" layout="prev, pager, next" />
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="奖学金列表" name="second">
                    <div class="pane-content">
                        <div class="pane-top">
                            <div class="module-common-header">
                                <div class="button-wrapped">
                                    <el-button type="primary" @click="addNewS">新增申请</el-button>
                                </div>
                            </div>
                            <!-- 表格部分 -->
                            <div class="module-common-table">
                                <el-table :data="scholarshipTableData" border style="width: 100%">
                                    <el-table-column type="index" width="50"></el-table-column>
                                    <el-table-column prop="id" label="编号" width="200" />
                                    <el-table-column prop="student_name" label="学生" width="150" />
                                    <el-table-column prop="department" label="院系" width="200" />
                                    <el-table-column prop="major" label="专业" width="150" />
                                    <el-table-column prop="grade" label="年级" width="100" />
                                    <el-table-column prop="scholarship_level" label="奖学金等级" width="180" />
                                    <el-table-column prop="create_time" label="申请时间" width="180">
                                        <template #default="{ row }">
                                            <div>{{ row.create_time?.slice(0, 10) }}</div>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="update_time" label="更新时间" width="180">
                                        <template #default="{ row }">
                                            <div>{{ row.update_time?.slice(0, 10) }}</div>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="status" label="审核状态" width="200">
                                        <template #default="{ row }">
                                            <el-tag class="ml-2" type="primary" v-if="row.status == 0">未审核</el-tag>
                                            <el-tag class="ml-2" type="success"
                                                v-else-if="row.status == 1">小组审核通过</el-tag>
                                            <el-tag class="ml-2" type="danger"
                                                v-else-if="row.status == -1">小组审核未通过</el-tag>
                                            <el-tag class="ml-2" type="success"
                                                v-else-if="row.status == 2">辅导员审核通过</el-tag>
                                            <el-tag class="ml-2" type="danger"
                                                v-else-if="row.status == -2">辅导员审核未通过</el-tag>
                                            <el-tag class="ml-2" type="success"
                                                v-else-if="row.status == 3">院领导审核通过</el-tag>
                                            <el-tag class="ml-2" type="danger"
                                                v-else-if="row.status == -3">院领导审核未通过</el-tag>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="操作" width="180" fixed="right">
                                        <template #default="{ row }">
                                            <div>
                                                <el-button type="success" @click="editScholarship(row)">编辑</el-button>
                                                <el-button type="danger" @click="deleteScholarship(row)">删除</el-button>
                                            </div>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                        </div>
                        <div class="table-footer">
                            <el-pagination :page-size="paginationData.scholarshipPageSize"
                                :current-page="paginationData.scholarshipCurrentPage" :pager-count="7"
                                :total="paginationData.scholarshipTotal" :page-count="paginationData.scholarshipCount"
                                @current-change="scholarshipCurrentChange" layout="prev, pager, next" />
                        </div>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
    <edit ref="EditB" @success="getBursaryFirstPageList"></edit>
    <edit ref="EditS" @success="getScholarFirstPageList"></edit>
    <deleteApply ref="deleteB" @success="getBursaryFirstPageList"></deleteApply>
    <deleteApply ref="deleteS" @success="getScholarFirstPageList"></deleteApply>
</template>

<script lang='ts' setup>
import { ref, reactive, } from 'vue'
import BreadCrumb from '@/components/breadCrumb.vue'
import { bus } from "@/utils/mitt.js"
import type { TabsPaneContext } from 'element-plus'
import {getScholarshipApplications, getBursaryApplications } from '@/api/apply.js'
import {useUserInfoStore} from '@/store/userInfo.js'
import edit from './component/edit.vue'
import deleteApply from './component/delete.vue'
import { useRouter } from 'vue-router'

const router = useRouter()
// 获取用户信息
const userStore = useUserInfoStore()
// 面包屑
const breadcrumb = ref()
// 面包屑参数
const item = ref({
    first: '奖助学金项目管理',
})
const handleClick = (tab: TabsPaneContext) => {
    if (tab.props.label == '助学金列表') {
        getBursaryFirstPageList()
    }
    if (tab.props.label == '奖学金列表') {
        getScholarFirstPageList()
    }
}

const activeName = ref('first')

// 助学金表格
const tableData = ref([])
// 奖学金表格
const scholarshipTableData = ref([])

// 分页数据
const paginationData = reactive({
    // 助学金总数
    bursaryTotal: null,
    // 助学金列表总页数
    bursarytPageCount: null,
    // 助学金列表当前所处页数
    bursarytCurrentPage: 1,
    // 助学金每页的数量
    bursaryPageSize: 2,
    // 奖学金列表总条数
    scholarshipTotal: null,
    // 奖学金列表总页数
    scholarshipCount: null,
    // 奖学金列表当前所处页数
    scholarshipCurrentPage: 1,
    // 奖学金每页的数量
    scholarshipPageSize: 2,
})


// 获取助学金列表的页数
const getBursaryListLength = async () => {
    const res = await getBursaryApplications(userStore.account,1)
    paginationData.bursaryTotal = res.data.total
    paginationData.bursarytPageCount = Math.ceil(res.data.total / paginationData.bursaryPageSize)
}
getBursaryListLength()
// 获取奖学金列表的页数
const getScholarshipListLength = async () => {
    const res = await getScholarshipApplications(userStore.account,1)
    paginationData.scholarshipTotal = res.data.total
    paginationData.scholarshipCount = Math.ceil(res.data.total / paginationData.scholarshipPageSize)
}
getScholarshipListLength()
// 默认获取助学金第一页的数据
const getBursaryFirstPageList = async () => {
    const res = await getBursaryApplications(userStore.account,1)
    tableData.value = res.data.data
    paginationData.bursarytCurrentPage = 1
    getBursaryListLength()
}
getBursaryFirstPageList()
// 默认获取奖学金列表第一页的数据
const getScholarFirstPageList = async () => {
    const res = await getScholarshipApplications(userStore.account,1)
    scholarshipTableData.value = res.data.data
    paginationData.scholarshipCurrentPage = 1
    getScholarshipListLength()
}
getScholarFirstPageList()

// 助学金列表监听换页
const BursaryCurrentChange = async (value: number) => {
    paginationData.bursarytCurrentPage = value
    const res = await getBursaryApplications(userStore.account,value)
    tableData.value = res.data.data
}

// 奖学金列表监听换页
const scholarshipCurrentChange = async (value: number) => {
    paginationData.scholarshipCurrentPage = value
    const res = await getScholarshipApplications(userStore.account,value)
    scholarshipTableData.value = res.data.data
}


// 打开编辑助学金窗口
const EditB = ref()
const editBursary = (row) => {
    EditB.value.open()
    bus.emit('editInfoIdB', row)
}
// 打开编辑奖学金窗口
const EditS = ref()
const editScholarship = (row) => {
    EditS.value.open()
    bus.emit('editInfoIdS', row)
}

// 打开删除助学金窗口
const deleteB = ref()
const deleteBursary = (row: any) => {
    deleteB.value.open()
    bus.emit('deleteB', row.id)
}
// 打开删除奖学金窗口
const deleteS = ref()
const deleteScholarship = (row: any) => {
    deleteS.value.open()
    bus.emit('deleteS', row.id)
}

//助学金新增跳转
const addNewB = () => {
    router.push({path: '/applyAid'})
}
//奖学金新增跳转
const addNewS = () => {
    router.push({path: '/applyScholarship'})
}
</script>

<style lang="scss" scoped>
:deep(.el-table .cell) {
    font-weight: 400;
}
</style>